


<template>
  <div v-if="showStatistics">
    <el-card class="analysis-chart-card">
      <div class="flex-between">
        <div>

          <div style="color: red;">实付款:￥{{ totloPrice.finalPrice }}</div>
          <div>已经使用<span style="color: red;">{{totloPrice.couponPrice?totloPrice.couponPrice:0 }}</span>元优惠券</div>

        </div>
        <el-button type="danger"
                   @click="settleAccounts">结算</el-button>
      </div>

    </el-card>
    <!-- 余额充值 -->

    <el-drawer title="订单结算"
               :visible.sync="drawer">

      <div class="padding15 ">
        <div style="height: 150px;"
             class="flex-column">

          <div style="color: red; font-size: 30px; margin-bottom: 15px;">实付款:￥{{ totloPrice.finalPrice }}</div>
          <div>
            <span style="color: red;">已经使用{{totloPrice.couponPrice?totloPrice.couponPrice:0 }}元优惠券</span><span style="color: red;"
                  v-if="totloPrice.deduction_integral_ratio">{{'+'+totloPrice.surplus_integral?totloPrice.surplus_integral:0 }}</span><span v-if="totloPrice.deduction_integral_ratio"
                  style="color: red;">积分约等于{{ totloPrice.deduction_integral_ratio }}元</span>
          </div>
        </div>
        <el-form ref="form"
                 label-position="top"
                 @submit.native.prevent
                 :model="form"
                 label-width="100px">
          <el-form-item label="支付类型:"
                        prop="name">
            <div class="flex-wrap-justifyBetween">
              <div v-for="(item,index) in paymentTypeList"
                   :key="index"
                   v-show="item.text">
                <div @click="xSswitchRechargePrice(index,item)"
                     :class="['flex-column',xScurrentIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
                  <div class="flex">

                    <img class="avater"
                         :src="item.img"
                         alt="">

                    <div class="">
                      <span style="color: rgb(51, 51, 51);">{{item.text}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="form.pay_way!=1"
                        label="条形码:"
                        prop="name">
            <el-input clearable
                      ref="InputWarp"
                      v-focus
                      :maxlength="100"
                      @keyup.native="handleKeyUp"
                      v-model="auth_code"
                      placeholder="条形码参数" />
          </el-form-item>
          <el-form-item v-else
                        label="余额码:"
                        prop="name">
            <el-input clearable
                      ref="InputWarp"
                      v-focus
                      :maxlength="100"
                      @keyup.native="handleKeyUp"
                      v-model="random_code"
                      placeholder="余额码参数" />
          </el-form-item>
        </el-form>
      </div>

      <el-button class="fix flex "
                 type="primary"
                 :loading="loading"
                 @click="barCodeFn()">确定并扣款</el-button>

    </el-drawer>

  </div>
</template>
  
<script>


import { createGoodsOrder } from '@/api/order/goodsOrderList'
import Vue from 'Vue'
export default {
  props: {
    totloPrice: Object,
    showStatistics: Boolean
  },

  data () {
    return {
      xScurrentIndex: 0,
      realBarcode: '',
      count: 0,
      disabled: false,
      loading: false,
      drawer: false,
      auth_code: "",
      random_code: '',
      paymentTypeList: [{
        img: require('../../../../assets/PC收银/组合 1051.png'),
        text: '余额支付'
      }, {
        img: require('../../../../assets/PC收银/组合 1052.png'),
        text: '微信支付'
      }, {
        img: require('../../../../assets/PC收银/组合 467.png'),
        text: '支付宝支付'
      }, {

      }],
      // 确定并且扣款
      form: {
        goods_id: '',
        pay_way: 1,
        uid: '',
        number: '',
        coupon_id: '',
        points_offset: '',


      }
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },

  methods: {
    xSswitchRechargePrice (index) {
      this.$nextTick(() => {
        this.$refs.InputWarp.focus();
        Vue.directive('focus', {
          inserted: function (el) {
            el.querySelector('input').focus()
          },
          update: function (el) {
            // 聚焦元素
            el.querySelector('input').focus()
          }

        })
      })
      console.log(index)
      this.auth_code = '',
        this.random_code = ''
      if (index == 1) {
        this.form.pay_way = 7
        console.log('线上微信充值')
      } else if (index == 2) {
        this.form.pay_way = 8
        console.log('线上支付宝充值')
      } else {
        this.form.pay_way = 1
      }
      this.xScurrentIndex = index
      console.log(this.form.pay_way)

    },
    handleKeyUp (e) {
      console.log(e)
      let gap = 0;
      if (this.keyupLastTime) {
        gap = new Date().getTime() - this.keyupLastTime;
        if (gap > 50) {
          gap = 0;
          this.realBarcode = "";
        }
      }
      this.keyupLastTime = new Date().getTime();
      // 输入法会触发keyup事件，key为Process，跳过即可
      if (e.key != "Process" && gap < 50) {
        if (e.key.trim().length == 1) {
          // 输入单个字母或者数字
          this.realBarcode += e.key;
        } else if (e.key.trim() == "Enter") {
          console.log('结束了')
          // 根据规则，判断barcode类型，返回数据（自定义规则）
          if (this.realBarcode) {
            if (this.form.pay_way == 1) {
              this.random_code = this.realBarcode;
            } else {
              this.auth_code = this.realBarcode;
            }

            this.realBarcode = "";
          } else {

            return;
          }
        }
      }

    },

    /* 获取数据 */
    load () {
      if (this.count >= 20) {
        this.disabled = true
      } else {
        this.count += 2
      }
    },
    // 结算
    settleAccounts () {
      this.auth_code = ''
      this.random_code = ''
      this.drawer = true
      this.$nextTick(() => {
        this.$refs.InputWarp.focus();
        Vue.directive('focus', {
          inserted: function (el) {
            el.querySelector('input').focus()
          },
          update: function (el) {
            // 聚焦元素
            el.querySelector('input').focus()
          }

        })
      })
    },
    // 提交参数
    async barCodeFn () {
      this.loading = true
      this.$util.assignObject(this.form, {
        ...this.totloPrice, pay_way: this.form.pay_way
      });
      let data = { ...this.form, auth_code: this.auth_code, random_code: this.random_code }
      console.log(data)

      if (this.form.pay_way == 1) {
        if (Number(this.totloPrice.balance) < Number(this.totloPrice.finalPrice)) {
          this.loading = false
          this.$message.error('余额不足无法提交订单')
          return
        }
      }
      console.log(this.form.pay_way)
      if (this.form.pay_way == 1) {
        if (!this.random_code) {
          this.loading = false
          this.$message.error('请用扫描枪获取余额码参数')
          this.$nextTick(() => {
            this.$refs.InputWarp.focus();
            Vue.directive('focus', {
              inserted: function (el) {
                el.querySelector('input').focus()
              },
              update: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
              }

            })
          })

          return false
        } else {
          const res = await createGoodsOrder({
            ...data
          })
          if (res.code == 0) {
            this.loading = false
            setTimeout(() => {
              this.drawer = false
              //如果使用的了优惠券还需要取消优惠券选择
              this.$emit('cancelCoupon', 100)
            }, 500)
            this.$message.success(res.message)
          } else {
            this.loading = false
            this.$message.error(res.message)
          }
        }

      } else if (this.form.pay_way == 7 || this.form.pay_way == 8) {
        if (!this.auth_code) {
          this.loading = false
          this.$message.error('请用扫描枪获取微信支付参数')
          this.$nextTick(() => {
            this.$refs.InputWarp.focus();
            Vue.directive('focus', {
              inserted: function (el) {
                el.querySelector('input').focus()
              },
              update: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
              }

            })
          })

          return false
        } else {
          const res = await createGoodsOrder({
            ...data
          })
          if (res.code == 0) {
            this.loading = false
            setTimeout(() => {
              this.drawer = false
            }, 500)
            this.$message.success(res.message)
          } else {
            this.loading = false
            this.$message.error(res.message)
          }
        }
      }



    }

  },
  watch: {
    drawer () {
      this.$nextTick(() => {
        console.log(this.totloPrice)
      });
    }
  }
};
  </script>
  
  <style lang="scss" scoped>
.avater {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}
.cashierSelectionContent {
  margin-top: 15px;

  padding: 15px;
  width: 120px;
  height: 50px;
  border: 2px solid rgb(228, 227, 227);
  background: rgb(255, 246, 246);
}

.cashierSelectionContent-noActive {
  margin-top: 15px;

  padding: 15px;
  width: 120px;
  height: 50px;

  border: 2px solid rgb(228, 227, 227);
  background: rgb(255, 255, 255);
}
.fixed {
  position: absolute;
  bottom: 10px;
}
.fix {
  position: absolute;
  bottom: 50px;
  border-radius: 10px;
  width: 95%;
  margin-left: 10px;
  height: 64px;
  background: rgb(90, 158, 247);
  color: #fff;
}
.analysis-chart-card {
  font-size: 30px;

  height: 114.31px;

  background: rgb(255, 255, 255);
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}
</style>
  